﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../js/jq/jquery.lastest.js"></script>
    <script src="../../js/ko/knockout.lastest.js"></script>

    <script type="text/javascript">
        // Class to represent a row in the seat reservations grid
        function SeatReservation(name, initialMeal) {
            var self = this;
            self.name = name;
            self.meal = ko.observable(initialMeal);

            self.formattedPrice = ko.computed(function () {
                var price = self.meal().price;
                return price ? "$" + price.toFixed(2) : "None";
            });
        }

        // Overall viewmodel for this screen, along with initial state
        function ReservationsViewModel() {
            var self = this;

            // Non-editable catalog data - would come from the server
            self.availableMeals = [
                { mealName: "Standard (sandwich)", price: 0 },
                { mealName: "Premium (lobster)", price: 34.95 },
                { mealName: "Ultimate (whole zebra)", price: 290 }
            ];

            // Editable data
            self.seats = ko.observableArray([
                new SeatReservation("Steve", self.availableMeals[0]),
                new SeatReservation("Bert", self.availableMeals[0])
            ]);

            // Operations
            self.addSeat = function () {
                self.seats.push(new SeatReservation("", self.availableMeals[0]));
            }
            self.removeSeat = function (seat) { self.seats.remove(seat) }

            self.totalSurcharge = ko.computed(function () {
                console.log('totalSurcharge');
                var total = 0;
                for (var i = 0; i < self.seats().length; i++)
                    total += self.seats()[i].meal().price;
                return total;
            });
        }

        $(function () {
            // Activates knockout.js
            ko.applyBindings(new ReservationsViewModel());
        });
    </script>
</head>
<body>
    <h2>Your seat reservations (<span data-bind="text: seats().length"></span>)</h2>
    <button data-bind="click: addSeat, enable: seats().length < 10">Reserve another seat</button>

    <table>
        <thead>
            <tr>
                <th>Passenger name</th>
                <th>Meal</th>
                <th>Surcharge</th>
                <th>(format)</th>
                <th>(action)</th>
            </tr>
        </thead>

        <!-- Todo: Generate table body -->
        <tbody data-bind="foreach: seats">
            <tr>
                 <td><input data-bind="value: name" /></td>
                <td>
                    <select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select></td>
                <td data-bind="text: meal().price"></td>
                <td data-bind="text: formattedPrice"></td>
                <td><a href="#" data-bind="click: $root.removeSeat">Remove</a></td>
            </tr>
        </tbody>
    </table>

    <h3 data-bind="visible: totalSurcharge() > 0">Total surcharge: $<span data-bind="text: totalSurcharge().toFixed(2)"></span>
    </h3>
</body>
</html>